<template>
  <div class='container'>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-position="left"
          label-width="100px"
          style="width: 80%; margin-left:10px;"
        >
          <el-form-item
          label="所属学科"
          prop="subjectID"
          v-if="!subjectID"
          >
            <el-select v-model="formData.subjectID">
              <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              clearable
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="tagName">
            <el-input v-model="formData.tagName"></el-input>
          </el-form-item>
          <el-form-item class="right">
            <el-button  @click="$emit('close')">取消</el-button>
            <el-button  type="primary" @click="doSave">确认</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { add, detail, update } from '@/api/hmmm/tags'
export default {
  name: 'TagsAddOrEdit',
  props: {
    currentData: {
      type: Object,
      default: null // 这个属性可以是字符串，也可以是Number
    },
    subjectID: {
      type: [Object, Number],
      required: false
    }
  },
  data () {
    return {
      subjectList: [],
      formData: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [{ required: true, message: '请选择科目', trigger: 'change' }],
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getSimpleList()
    // 判断有无ID传过来，有就执行获取详情方法
    if (this.currentData) {
      this.loadDetail()
    }
    if (this.subjectID) {
      this.formData.subjectID = this.subjectID
    }
  },
  methods: {
    // 获取科目列表
    async getSimpleList () {
      try {
        this.isLoading = true
        const res = await simple()
        this.subjectList = res.data
        this.isLoading = false
      } catch (error) {
        console.log(error)
        this.isLoading = true
      }
    },

    // 发送添加的请求
    async handleAdd () {
      const res = await add(this.formData)
      console.log(res)
    },
    // 兜底检验，检验成功执行添加请求
    doSave () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 判断有无id,有执行更新函数，无执行新增函数
          await this.currentData ? this.doUpdate() : this.handleAdd()
          await this.$message.success(this.currentData ? '修改数据成功' : '添加数据成功')
          await this.emit()
        }
      })
    },
    emit () {
      // this.$listeners: 自动会收集所有加在这个组件上的事件监听
      this.$listeners.close && this.$emit('close')
      this.$listeners.refresh && this.$emit('refresh')
    },
    // 获取学科详情方法
    async loadDetail () {
      const { currentData } = this
      if (!currentData) {
        return
      }
      const res = await detail(this.currentData)
      console.log(res)
      // 数据解构
      const { id, subjectID, tagName } = res.data
      this.formData = {
        id,
        subjectID,
        tagName
      }
    },
    // 发送修改请求
    async doUpdate () {
      console.log(this.formData)
      const res = await update(this.formData)
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.right{
  display: flex;
  justify-content: flex-end;
}
</style>
